<template>
  <view class="wrapper">
    <u-modal
      v-model="showModal"
      title="售后单"
      show-confirm-button
      show-cancel-button
      confirm-text="同意退款"
      @confirm="refundModalConfirm"
    >
      <view class="refund-coupon">
        <view class="title">此订单包含消费返券如下：</view>
        <view
          v-for="(item, index) in list"
          :key="index"
          class="list-item"
        >
          <view class="oneline-hide coupon-name">{{ item.couponName }}</view>
          <view v-if="item.number > 1" class="coupon-count">x{{ item.number }}</view>
          <view
            class="coupon-status"
            :style="{
              color: item.status === 2 ? '#00B42A' : '#F76560',
              backgroundColor: item.status === 2 ? '#E8FFEA' : '#FFECE8'
            }"
          >{{ formatCouponStatus(item.status) }}</view>
        </view>
      </view>
    </u-modal>
  </view>
</template>
<script>

export default {
  name: "index",
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      showModal: false
    }
  },
  computed: {
    formatCouponStatus() {
      return function (val) {
        switch (val) {
          case 1: return '部分使用'
          case 2: return '未使用'
          case 3: return '已使用'
        }
        return ''
      }
    }
  },
  methods: {
    show() {
      this.showModal = true
    },
    refundModalConfirm() {
      this.$emit('refundModal')
    }
  }
}
</script>

<style scoped lang="scss">
.wrapper {

  .refund-coupon {
    padding: 24rpx;

    .title {
      color: #999999;
      font-size: 28rpx;
    }

    .list-item {
      display: flex;
      align-items: center;
      margin-top: 16rpx;

      .coupon-name {
        color: #333333;
        font-size: 30rpx;
      }

      .coupon-count {
        color: #666666;
        font-size: 30rpx;
        margin-left: 22rpx;
      }

      .coupon-status {
        padding: 0 6rpx;
        height: 30rpx;
        line-height: 30rpx;
        font-size: 22rpx;
        border-radius: 4rpx;
        margin-left: 16rpx;
        flex-shrink: 0;
      }
    }
  }
}
</style>
